<template>
  <div class="mainua">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>修改客服</span>
          </div>
        </div>
        <div class="maincla_form" style="margin-top: 50px">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
              <el-input maxlength="11" v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="客服链接" prop="link">
              <el-input v-model="form.link"></el-input>
            </el-form-item>
            <el-form-item>
              <div>
                <el-button type="primary" @click="save" :loading="loading">保存</el-button>
                <el-button @click="$router.back()">取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { editServices,getCompanyListByName } from '@/api/user/services'
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };
    return {
      form: JSON.parse(localStorage.getItem("servicesItem")),
      loading:false,
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入号码", trigger: "blur" },
          { validator: checkPhone, message: "号码格式错误", trigger: "change" }
        ],
        link: [{ required: true, message: "请输入客服链接", trigger: "blur" }],
        company_id: [{ required: true, message: "请选择客户", trigger: "change" }],
      }
    };
  },
  methods:{
      save(){
          this.$refs.form.validate((e)=>{
              if(e){
                this.loading = true
                 const data = {...this.form}
                delete data.company_name
                 editServices(data).then(res=>{
                     if (res.errcode == 0) {
                      this.$message.success("修改成功");
                      setTimeout(()=>{
                        this.$router.back(-1);
                      },300)
                    } else {
                      this.$message.error(res.errmsg);
                    }
                 }).finally(()=>{
                   this.loading = false
                 })
              }
          })
      }
  }
};
</script>

<style scoped lang='scss'>
/deep/.el-select,/deep/.el-input{
  width:200px;
}
</style>